<template>
    <div>
        <wd-header title="我的收藏">
            <span class="iconfont" @click="goback" slot="left">&#xe697;</span>
        </wd-header>
        <div class="content" v-if="lists.length>0">
            <ul>
                <router-link tag="li" v-for="(item,index) in lists" :key="index" :to="{
                        name:'singleword',
                        params:{
                          word: item.word,
                          phonetic:item.phonogram,
                          explain: item.word_explain,
                          imgurl: item.imgUrl,
                          split: item.split,
                          lenovo: item.associate,
                          wordid: item.wordId
                        }
                      }">
                    <div class="top">
                        <h3>{{item.word}}</h3>
                    </div>
                    <div class="bottom">
                        <span>{{item.word_explain}}</span>
                        <span>{{item.create_time}}</span>
                    </div>
                </router-link>
            </ul>
        </div>
        <p class="no_collections" v-else>您还没有收藏单词,快去收藏吧</p>
    </div>
</template>
<script>
export default {
    name: 'mycollections',
    data() {
        return {
            lists: [],
            auth: JSON.parse(localStorage.user),
            pageIndex: 1,
            collectionurl: 'http://www.jydsapp.com/jydsApi/api/h5/user/getCollectionList'
        }
    },
    beforeRouteLeave(to, from, next) {
        if (to.name == 'singleword') {
            let routeinfo = to.params //复用了从单元单词列表到单个单词的模块
            this.$store.commit('saveSingleWordNeedWordData', routeinfo)
            next()
        } else {
            next()
        }
    },
    created() {
        this.getData()
    },
    methods: {
        goback() {
            this.$router.go(-1)
        },
        getData() {
            let str = `{"userPhone":"${this.auth.user.phoneNum}","token":"${this.auth.token}","pageIndex":"${this.pageIndex}"}`
            let toast = this.$Toast({
                content: '加载中…',
                iconClass: 'loader',
                autoClose: false
            })
            this.fetch({
                method: 'post',
                url: this.collectionurl,
                params: {
                    "paramStr": str
                }
            }).then((data) => {
                let res = data.data
                if (res.code == 200) {
                    toast.close()
                    this.lists = JSON.parse(res.data).collectionList
                } else if (res.code == 103) {
                    toast.close()
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录'
                    })
                    this.$router.replace('/login')
                } else {
                    toast.close()
                    console.log(data.data.message)
                }
            }).catch((err) => {
                console.log(err)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    li {
        font-size:14px;
        padding: 0.37037rem;
        border-bottom: 1px solid #eee;
        .top {
            h3 {
                font-weight: 500;
                color: #fe4f4a;
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
        }
    }
}

.no_collections {
    font-size:14px;
    text-align: center;
    color: #555;
    margin-top: 50%;
}
</style>
